<template>
  <div style="width: 90%; margin: 0 auto">
    <!-- 查询框 -->
    <el-row style="margin-left: -78px">
      <el-col :span="20">
        <el-input
          placeholder="请输入内容"
          v-model="select_value"
          style="background-color: #fff; width: 60%"
        >
          <template slot="prepend">权限名称</template>
          <el-button slot="append" icon="el-icon-search" @click="searchPers()"
            >查询</el-button
          >
        </el-input>
        <el-button
          style="vertical-align: middle; margin-left: 20px"
          type="success"
          icon="el-icon-plus"
          @click="addOnePer()"
          >添加菜单权限</el-button
        >
      </el-col>
    </el-row>

    <!-- 权限列表 -->
    <el-row style="margin-top: 15px">
      <el-card shadow="hover">
        <!-- 卡片头部 -->
        <div slot="header" class="clearfix">
          <el-row style="height: 40px">
            <el-col :span="24">
              <div
                style="
                  width: 100%;
                  font-size: 20px;
                  text-align: center;
                  color: #000000;
                  margin: 10px 0px 0px 10px;
                "
              >
                权限列表
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 列表 -->
        <el-table
          :data="persList"
          highlight-current-row
          row-key="per_id"
          border
          @current-change="handleCurrentChange"
          style="width: 70%; margin: 0 auto"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            prop="per_name"
            label="权限名称"
            width="220"
          ></el-table-column>
          <el-table-column
            prop="per_type"
            label="类型"
            width="150"
            align="center"
          >
            <div slot-scope="scope">
              <el-tag
                type="warning"
                disable-transitions
                v-if="scope.row.per_type == 'menu'"
                >菜单功能</el-tag
              >
              <el-tag
                type="success"
                disable-transitions
                v-if="scope.row.per_type == 'permission'"
                >权限功能</el-tag
              >
            </div>
          </el-table-column>
          <el-table-column
            prop="per_remark"
            label="状态"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                type="success"
                disable-transitions
                v-if="scope.row.per_remark == 1"
                >正常使用中</el-tag
              >
              <el-tag
                type="danger"
                disable-transitions
                v-if="scope.row.per_remark == 0"
                >已废弃使用</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                disable-transitions
                v-if="scope.row.per_remark == 1"
                @click="updatePer(scope.row.per_id, 0)"
                icon="el-icon-delete"
                size="small"
                >废弃</el-button
              >
              <el-button
                type="success"
                disable-transitions
                v-if="scope.row.per_remark == 0"
                @click="updatePer(scope.row.per_id, 1)"
                icon="el-icon-edit"
                size="small"
                >恢复</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>

    <!-- 添加权限弹出框 -->
    <el-dialog
      :visible.sync="addPerVisible"
      title="添加新权限"
      style="text-align: left"
    >
      <el-form
        :model="addPer"
        :rules="rules"
        ref="addPerForm"
        label-width="100px"
      >
        <el-form-item label="权限名称" prop="per_name">
          <el-input v-model="addPer.per_name"></el-input>
        </el-form-item>
        <el-form-item label="父权限" prop="per_pid">
          <el-select v-model="addPer.per_pid" placeholder="请选择">
            <el-option
              label="新建为父权限"
              value="0"
              style="color: red; font-weight: bolder"
            ></el-option>
            <el-option
              v-for="menuPer in rootPerList"
              :key="menuPer.per_id"
              :label="menuPer.per_name"
              :value="menuPer.per_id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="savePer('addPerForm')"
            >立即创建</el-button
          >
          <el-button @click="resetAddPer('addPerForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 添加用户弹出框结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      //所有权限
      persList: [],

      //所有根权限
      rootPerList: [],

      //添加新权限可视框
      addPerVisible: false,

      //添加的权限内容
      addPer: {
        per_name: "",
        per_pid: "",
      },

      currentRow: "",

      // 查询值
      select_value: "",

      // 表单验证规则
      rules: {
        per_name: [
          { required: true, message: "请填写权限名称", trigger: "blur" },
          {
            pattern:
              /^[\u4e00-\u9fa5]{2,50}$/,
            message: "权限名称为2～50个汉字，不能有字母、数字、特殊字符或空格",
            trigger: "blur",
          },
        ],
        per_pid: [{ required: true, message: "请选择!", trigger: "change" }],
      },
    };
  },

  methods: {
    //加载所有权限
    loadPers() {
      this.$axios
        .get("/perstree"
        )
        .then((resp) => {
          if (resp.data.status == 1000) {
            this.persList = resp.data.data;
          } else {
            this.$message({
              type: "error",
              message: "暂无相应数据!",
            });
          }
        })
        .catch((error) => {});
    },
    //查询语句查询权限
    searchPers(){
      this.$axios
        .get("/pers",{
          params:{
            value:this.select_value
          }
        }
        )
        .then((resp) => {
          if (resp.data.status == 1000) {
            this.persList = resp.data.data;
          } else {
            this.$message({
              type: "error",
              message: "暂无相应数据!",
            });
          }
        })
        .catch((error) => {});
    },

    //加载所有菜单权限
    loadAllRootPers() {
      this.$axios
        .get("/menus")
        .then((resp) => {
          if (resp.data.status == 1000) {
            this.rootPerList = resp.data.data;
          }
        })
        .catch((error) => {});
    },

    //点击添加按钮
    addOnePer() {
      this.loadAllRootPers();
      this.addPerVisible = true;
    },

    //保存新权限
    savePer(addPerForm) {
      this.$refs[addPerForm].validate((valid) => {
        if (valid) {
          this.$axios
            .post("/pers", this.addPer)
            .then((resp) => {
              if (resp.data.status == 1000) {
                //alert(resp.data.message);
                this.$message({
                  type: "success",
                  message: "保存成功!",
                });
                this.addPerVisible = false;
                this.$refs[addPerForm].resetFields();
                this.loadPers();
              } else {
                //alert(resp.data.message);
                this.$message({
                  type: "error",
                  message: "保存失败!",
                });
              }
            })
            .catch((error) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //重置添加新权限
    resetAddPer(addPerForm) {
      this.$refs[addPerForm].resetFields();
    },

    //修改权限状态
    updatePer(per_id, needChangeStatus) {
      // alert(per_id + "##" + needChangeStatus);
      this.$confirm("确定执行该操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/pers/status", {
              params: {
                per_id: per_id,
                per_remark: needChangeStatus,
              },
            })
            .then((resp) => {
              if ((resp.data.status = 1000)) {
                this.$message({
                  type: "success",
                  message: "成功!",
                });
                this.loadPers();
              } else {
                this.$message({
                  type: "error",
                  message: "失败!",
                });
              }
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 表格控制当前选中行
    handleCurrentChange(val) {
      this.currentRow = val;
    },
  },

  mounted() {
    this.loadPers();
  },
};
</script>